<template>
	<view class="content">
		<view class="header">
			<view class="logo"><image src="../../static/logo2.png" mode="widthFix" class="logoImg"></image></view>
			<view class="title"><image src="../../static/title.png" mode="widthFix" class="titleImg"></image></view>
		</view>
		<view class="list">
			<view class="item" v-for="(v, k) in list" :key="k">
				<image :src="v.url" mode="widthFix" @click="toDetail(v)"></image>
			</view>
		</view>
	</view>
</template>

<script>
import fandian from '../../static/fandian.png';
import feiyi from '../../static/feiyi.png';
import jumu from '../../static/jumu.png';
import lvxing from '../../static/lvxing.png';
import lvyou from '../../static/lvyou.png';
import wenwu from '../../static/wenwu.png';
import zhaoshang from '../../static/zhaoshang.png';
import lxs from '../../static/lxs.png';
export default {
	data() {
		return {
			// title: 'Hello'
			list: []
		};
	},
	onLoad() {},
	onShow() {
		this.init();
	},
	methods: {
		init() {
			this.$http(
				'/channels/1',
				'GET',
				{},
				{
					'Content-Type': 'application/json; charset=UTF-8',
					'X-SS-API-KEY': '533341d2-15bc-4719-bff5-da8cf25e9a71'
				}
			).then(({ data }) => {
				this.list = data.value;
				for (let x of this.list) {
					// 招商
					if (x.id == 2) {
						x.url = zhaoshang;
					}
					if (x.id == 3) {
						x.url = lvyou;
					}
					if (x.id == 4) {
						x.url = fandian;
					}
					if (x.id == 5) {
						x.url = feiyi;
					}
					if (x.id == 6) {
						x.url = wenwu;
					}
					if (x.id == 7) {
						x.url = jumu;
					}
					if(x.id ==8){
						x.url = lxs
					}
				}
			});
		},
		toDetail(v) {
			uni.navigateTo({
				url: './detail?data=' + JSON.stringify(v)
			});
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100vh;
	overflow: scroll;
	background-image: url(../../static/bg1.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.header {
	padding: 20rpx;
}
.logo {
	text-align: right;
	margin: 30rpx 40rpx 10rpx;
	.logoImg {
		width: 160rpx;
	}
}
.title {
	margin: 20rpx auto;
	.titleImg {
		width: 100%;
	}
}
.list {
	text-align: center;
	.item {
		margin: 20rpx auto;
		image {
			width: 65%;
		}
	}
}
</style>
